<template>
    <div 
        class="markdown-container-cp" 
        v-html="compiledMarkdown" 
        ref="compiledMarkdown">
    </div>
</template>

<script>
//博客markdown渲染组件 （防止css污染）
import Highlight from "@/common/Highlight";
//引入markdown解析库
import marked from 'marked';
export default { 
    name: 'MarkdownCp',
    props:{
        markdown:{
            type:String,
            default:'',
        },
    },
    computed:{
        compiledMarkdown(){  //将markdown文本转化为html
            return marked(this.markdown);
        }
    },
    mounted(){
        this.aOnClick();
        Highlight.highlightCode();  //高亮代码
    },
    updated(){
        this.aOnClick();
        Highlight.highlightCode();  //高亮代码
    },
    methods:{
        aOnClick(){
            if(!this.$refs.compiledMarkdown) return;
            let aList = this.$refs.compiledMarkdown.getElementsByTagName('a');
            for(let a of aList){
                a.target="_blank"; //设置a标签跳转时打开新的页面
            }
        },
    },
}
</script>

<style lang="scss">
.markdown-container-cp{
    @import '~/assets/markdown.css';
    width:100%;
    height:fit-content;
    overflow:hidden;
    border-top: dashed 1px #e9e9e9;
    font-size:1.6rem;
    img{
        max-width: 100%;
        border-radius: 2px;
    }
    .codehilite{
        border-radius: 3px;
    }
    pre {
        padding: 15px;
        box-sizing: border-box; 
        overflow: auto;
        border-radius: 2px;
        margin: 0;
        background-color: rgb(247, 247, 247);
        code{
            margin: 0; 
            padding:0;
            background-color: #ffffff00;
            line-height: 1.7;
        }
    }
    a{
        color:#48a3d7;
    }
}
</style>